import React, { useEffect, useState } from 'react'

const InkAnimation = ({ emotion = null }) => {
  const [inkDrops, setInkDrops] = useState([])

  useEffect(() => {
    const createInkDrop = () => {
      const newDrop = {
        id: Date.now() + Math.random(),
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: Math.random() * 100 + 50,
        duration: Math.random() * 3 + 2,
        delay: Math.random() * 2
      }
      
      setInkDrops(prev => [...prev, newDrop])
      
      // 清理旧的墨滴
      setTimeout(() => {
        setInkDrops(prev => prev.filter(drop => drop.id !== newDrop.id))
      }, (newDrop.duration + newDrop.delay) * 1000)
    }

    // 定期创建新的墨滴
    const interval = setInterval(createInkDrop, 3000)
    
    // 初始创建几个墨滴
    for (let i = 0; i < 3; i++) {
      setTimeout(createInkDrop, i * 1000)
    }

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden">
      {/* 静态背景纹理 */}
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-10 left-10 w-32 h-32 rounded-full blur-xl" style={{background: 'radial-gradient(circle, rgba(206, 212, 218, 0.3), transparent)'}}></div>
        <div className="absolute top-1/3 right-20 w-24 h-24 rounded-full blur-lg" style={{background: 'radial-gradient(circle, rgba(233, 236, 239, 0.2), transparent)'}}></div>
        <div className="absolute bottom-1/4 left-1/4 w-40 h-40 rounded-full blur-2xl" style={{background: 'radial-gradient(circle, rgba(222, 226, 230, 0.25), transparent)'}}></div>
        <div className="absolute bottom-10 right-10 w-28 h-28 rounded-full blur-xl" style={{background: 'radial-gradient(circle, rgba(206, 212, 218, 0.3), transparent)'}}></div>
      </div>

      {/* 动态墨滴 */}
      {inkDrops.map(drop => (
        <div
          key={drop.id}
          className="absolute rounded-full blur-sm"
          style={{
            left: `${drop.x}%`,
            top: `${drop.y}%`,
            width: `${drop.size}px`,
            height: `${drop.size}px`,
            background: 'radial-gradient(circle, rgba(173, 181, 189, 0.4), transparent)',
            animation: `inkDrop ${drop.duration}s ease-out ${drop.delay}s forwards`,
            opacity: 0
          }}
        />
      ))}

      {/* 飘动的粒子效果 */}
      <div className="absolute inset-0">
        {[...Array(6)].map((_, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-ink-300 rounded-full opacity-40"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animation: `float ${5 + Math.random() * 5}s ease-in-out infinite`,
              animationDelay: `${Math.random() * 3}s`
            }}
          />
        ))}
      </div>


    </div>
  )
}

export default InkAnimation
